<template>
  <layout title="title标题">
    <layout-content title="基础使用">
      <tn-title>图鸟UI</tn-title>
    </layout-content>
    <layout-content title="设置左图标">
      <tn-title left-icon="logo-tuniao">图鸟UI</tn-title>
    </layout-content>
    <layout-content title="设置右图标">
      <tn-title right-icon="logo-tuniao">图鸟UI</tn-title>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-title color="tn-color-red">图鸟UI</tn-title>
      <tn-title bg-color="tn-bg-indigo">图鸟UI</tn-title>
      <tn-title type="danger" :custom-style="titleCustomStyle">图鸟UI</tn-title>
      <tn-title type="primary" :custom-style="titleCustomStyle">图鸟UI</tn-title>
      <tn-title bg-color="tn-cool-bg-6" :custom-style="titleCustomStyle">图鸟UI</tn-title>
    </layout-content>

    <layout-content title="设置尺寸/样式">
      <tn-title font-size="40" bg-color="tn-bg-indigo">图鸟UI</tn-title>
      <tn-title width="auto" height="60rpx" bg-color="tn-bg-indigo" :custom-style="titleCustomStyle">图鸟UI</tn-title>
    </layout-content>

    <layout-content title="设置辅助元素">
      <tn-title element-type="leftVLine">图鸟UI</tn-title>
      <tn-title element-type="leftVLine" element-color="tn-bg-blue">图鸟UI</tn-title>
      <tn-title element-type="leftPoint">图鸟UI</tn-title>
      <tn-title element-type="bottomLine">图鸟UI</tn-title>
    </layout-content>

    <layout-content title="设置子标题">
      <tn-title sub-title="Tuniao" color="tn-color-blue" sub-color="tn-color-blue--light">图鸟UI</tn-title>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>

  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnTitle from '@/tuniao-ui/components/tn-title/src/Title.vue'

// 自定义样式
const titleCustomStyle: CSSProperties = {
  marginTop: '20rpx'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}
</script>

<style lang="scss" scoped>
</style>
